"use client";
import Link from "next/link"
import { useEffect, useState } from "react";
import { getFriendlyLinks } from "@/apis/client/friendly-link";
import { FriendlyLink } from "@/types/friendly-link";

export function SiteFooter() {
  const [links, setLinks] = useState<FriendlyLink[]>([]);

  useEffect(() => {
    (async () => {
      try {
        const res = await getFriendlyLinks({ limit: 20 });
        setLinks(res || []);
      } catch (e) {
        // 静默失败，不影响 Footer 其他渲染
      }
    })();
  }, []);
  return (
    <footer className="border-t border-border bg-card mt-12">
      <div className="container mx-auto px-4 py-8">
        <div className="flex flex-col lg:flex-row gap-8 items-start lg:items-center justify-between">
          <div className="flex items-start gap-4">
            <div className="h-12 w-12 rounded-lg  flex items-center justify-center flex-shrink-0">
              <img src="/logo.png" alt="logo" className="h-12 w-12 rounded-lg" />
            </div>
            <div>
              <h3 className="font-bold text-base mb-1">凯笙小世界</h3>
              <p className="text-xs text-muted-foreground mb-1">www.kason.top</p>
              <p className="text-xs text-muted-foreground leading-relaxed max-w-2xl">
                凯笙小世界：一站式全面AIGC网站，提供AI绘图、ai聊能对话、ai翻译、
                ai提示词、ai工具、ai智能写作、3D设计、ai视频、ai语音等专业服务，
                为用户提供一个集合了国内外优秀AI工具的平台
              </p>
            </div>
          </div>

          <div className="flex gap-8">
            <div className="text-center">
              <div className="w-24 h-24 bg-muted rounded-lg mb-2 flex items-center justify-center">
                <img src="/public-qrcode.jpg" alt="wechat" className="h-24 w-24 rounded-lg" />
              </div>
              <p className="text-xs text-muted-foreground">微信公众号</p>
            </div>
            <div className="text-center">
              <div className="w-24 h-24 bg-muted rounded-lg mb-2 flex items-center justify-center">
                <img src="/wechat-qrcode.png" alt="wechat" className="h-24 w-24 rounded-lg" />
              </div>
              <p className="text-xs text-muted-foreground">添加微信号
              </p>
            </div>
          </div>
        </div>

        {/* 友情链接 */}
        {links.length > 0 && (
          <div className="mt-6">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-sm font-medium">友情链接</span>
            </div>
            <div className="flex flex-wrap gap-3 text-sm">
              {links.map((l, idx) => (
                <span key={l.id} className="inline-flex items-center gap-2">
                  <a href={l.url} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                    {l.name}
                  </a>
                  {idx < links.length - 1 && <span className="text-border">·</span>}
                </span>
              ))}
            </div>
          </div>
        )}

        <div className="mt-8 pt-6 border-t border-border">
          <div className="flex flex-col md:flex-row gap-4 items-center justify-center text-xs text-muted-foreground">
            <div className="flex flex-wrap gap-x-4 gap-y-2 justify-center items-center">
              <span>Copyright © 2025</span>
              <Link href="/" className="text-primary hover:underline">
                凯笙小世界
              </Link>
              <span>All Rights Reserved</span>
              <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" className="hover:underline">
                粤ICP备2024336397号-3
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
